<template>
  <div class="main">
    <div class="main-left">
      <el-tree
        style="user-select: none;"
        @node-contextmenu="handleNodeContextmenu"
        :data="data"
        :props="defaultProps"
        default-expand-all
        @node-click="handleNodeClick"
        ref="tree">
        <template slot-scope="{node , data}">
          <div style="font-size: 13px">
            <i :class="data.icon" :style="{color: data.iconcolor}"></i>
            <span v-if="data.edit">
               <el-input v-model="data.filename" class="input-icon" ref="inputIcon"
                         @input="changeFolderName($event, data)"
                         @blur="addFolderName($event, 'tree', data)"
                         @keyup.enter.native="$event.target.blur()"
               />
            </span>
            <span v-else>&nbsp;{{ handleTreeTitle(data.filename) }}</span>
          </div>
        </template>
      </el-tree>
      <TreeMenu ref="treeMenu" @handleClick="handleClick"></TreeMenu>
    </div>
    <div class="main-right">
      <div class="main-table-one">
        <el-row>
          <el-col :span="12">
            <el-breadcrumb class="main-table-navi">
              <el-breadcrumb-item>
                <i class="el-icon-s-platform" style="font-size: 20px;color: #1991CB;cursor: pointer" @click="clickTopMenu('home')"></i>
              </el-breadcrumb-item>
              <el-breadcrumb-item v-if="item.data" v-for="(item,index) in currentTreeMenu">
                <span @click="clickTopMenu(item.data)" style="cursor: pointer">{{item.data.filename}}</span>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </el-col>
          <el-col :span="2">
            <div style="display: flex">
              <span class="main-table-navi2" @click="collectFolder"><i class="el-icon-star-on"></i></span>
              <span class="main-table-navi2" @click="refreshFolder"><i class="el-icon-refresh"></i></span>
            </div>
          </el-col>
          <el-col :span="10">
            <div class="main-table-navi3">
              <div style="display: flex">
                <div style="margin-right: 20px">
                  <div style="display: flex" class="main-table-navi4">
                    <!-- 排序 -->
                    <span class="main-table-navi2" @click.stop.prevent="topHandleList($event)"><i class="el-icon-s-operation"></i></span>
                    <!-- 列表 -->
                    <span class="main-table-navi2"
                          :style="listType === 'table' ? 'background-color: #E9F4FF;color: #3C8CFE' : ''"
                          @click="changeContentType('table')"
                    ><i class="iconfont icon-liebiao1"></i></span>
                    <!-- 表格 -->
                    <span class="main-table-navi2"
                          :style="listType === 'list' ? 'background-color: #E9F4FF;color: #3C8CFE' : ''"
                          @click="changeContentType('list')"
                    ><i class="iconfont icon-liebiao2"></i></span>
                  </div>
                </div>
                <div>
                  <el-input placeholder="请输入内容" v-model="tableParams.filename" size="small" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search" @click="getAllData"></el-button>
                  </el-input>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div v-if="listType === 'table' && !isLoding" class="main-table-two" @contextmenu.prevent="handleContext" style="user-select: none;overflow-y: auto" @click="closeAllMenu">
        <!-- 遍历文件夹 -->
        <div class="grid-item" v-if="contentList.length > 0"
             :class="{ gridItemBackground:isSelected(item) }"
             v-for="(item, index) in contentList"
             :key="index"
             @click="clickTable(item)"
             @dblclick="doubleClick(item)"
             @contextmenu.stop.prevent="handleItem($event,item)">
          <div class="grid-item-top">
            <i v-if="isSelected(item)" class="el-icon-success checkStatus"></i>
            <!-- 判断当前是否是图片 -->
<!--            <el-image-->
<!--              v-if="item.filetype === '.png' || item.filetype === '.jpg' ||-->
<!--                    item.filetype === '.jpeg'"-->
<!--              style="width: 75px; height: 75px"-->
<!--              :src="item.fileBase64"-->
<!--              :preview-src-list="[item.fileBase64]">-->
<!--            </el-image>-->
            <i :class="item.icon" :style="{color: item.iconcolor, fontSize: '70px'}"></i>
          </div>
          <div class="grid-item-bottom">
             <span v-if="item.edit">
               <el-input v-model="item.filename" class="input-icon-content" :id="`inputIconContent${index}`"
                         style="width: 100%"
                         @input="changeFolderName($event, item)"
                         @blur="addFolderName($event, 'node', item, index)"
                         @keyup.enter.native="$event.target.blur()"
               />
            </span>
            <span v-else>
               <span v-if="item.filename.length > 8">{{item.filename.substr(0,8)+'...'}}</span>
               <span v-else>{{item.filename}}</span>
            </span>
          </div>
        </div>
      </div>
      <div v-if="listType === 'list' && !isLoding" @contextmenu.prevent="handleContext" @click="closeAllMenu" style="width: 100%;padding: 10px;">
        <el-table
          :data="contentList"
          height="650"
          size="mini"
          style="width: 100%;"
        >
          <el-table-column type="index" width="50" label="序号"></el-table-column>
          <el-table-column prop="filename" :label="'文件名  文件数量(' + contentList.length + ')'" min-width="200px">
            <template slot-scope="scope">
              <div class="filename-content">
                <div style="width: 40px" v-if="scope.row.category === '1'">
                  <i class="el-icon-download filename-icon" @click="downFile_(scope.row)" style="margin-right: 3px"></i>
                  <i v-if="scope.row.filetype === '.pdf'"
                        class="el-icon-view filename-icon" @click="doubleClick(scope.row)"></i>
                </div>
                <div>
                  <span>{{scope.row.filename}}</span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="category" label="文件类型" width="100px">
            <template slot-scope="scope">
              <span v-if="scope.row.category === '0'">
                <span v-if="scope.row.filetype === 'cd'">
                  <i :class="scope.row.icon" :style="{color: scope.row.iconcolor}"></i> &nbsp;&nbsp; 目录
                </span>
                <span v-else>
                  <i :class="scope.row.icon" :style="{color: scope.row.iconcolor}"></i> &nbsp;&nbsp; 文件夹
                </span>
              </span>
              <span v-if="scope.row.category === '1'">
                <i :class="scope.row.icon" :style="{color: scope.row.iconcolor}"></i> &nbsp;&nbsp; 文件
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" label="修改日期" width="150px">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="updateBy" label="修改人" width="100px">
            <template slot-scope="scope">
              <span>{{ scope.row.updateBy }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建日期" width="150px">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div >
      <div v-if="isLoding" class="main-table-two-loading" style="text-align: center;width: 100%">
        <img src="@/assets/gif/5.gif" alt="" width="600">
      </div>
<!--      <pagination-->
<!--        v-show="total>0"-->
<!--        :total="total"-->
<!--        :page.sync="tableParams.pageNum"-->
<!--        @pagination="getContentList"-->
<!--      />-->
      <ContentMenu ref="contextMenu" :listType="listType"
                   @handleClick="handleClickContext"
                   @changeCk="changeContentType"
                   @changePx="changeContentPx"
                   @refresh="refresh"
      ></ContentMenu>
      <ItemMenu ref="itemMenu" @handleClick="handleItemClickContext"></ItemMenu>
      <FileEditor v-if="fileInfo.show" :fileInfo="fileInfo" @close="closeFileEdit" @saveFile="saveTxtFile"></FileEditor>
      <TopMenu ref="topMenu" :selectedItems="selectedItems" @refresh="refresh"></TopMenu>
      <QueryPdf v-if="pdfInfo.show" ref="queryPdf" :pdfInfo="pdfInfo" @cancel="pdfInfo.show = false"></QueryPdf>
    </div>
  </div>
</template>

<script>
import {
  addWjglfl,
  delWjglfl,
  downloadFile,
  listWjglfl,
  globalList,
  queryMaxPx,
  saveFile,
  updateWjglfl,
  verifyFileName,
  getFileResource,
  getFileBae64
} from '@/api/gd/wjglfl'
import TopMenu from '@/views/gd/wjgl/TopMenu.vue'
import TreeMenu from '@/views/gd/wjgl/TreeMenu.vue'
import ContentMenu from '@/views/gd/wjgl/ContentMenu.vue'
import ItemMenu from '@/views/gd/wjgl/ItemMenu.vue'
import FileEditor from '@/views/gd/wjgl/component/FileEditor.vue'
import QueryPdf from '@/views/gd/wjgl/component/queryPdf.vue'
import { pinyin } from 'pinyin-pro'
import { mapState, mapActions } from 'vuex';
export default {
  name: 'index',
  components: { TreeMenu, ContentMenu, ItemMenu, FileEditor, TopMenu, QueryPdf },
  data() {
    return {
      img: '',
      fileInfo: {
        show: false,
        title: '',
        node: {}
      },
      pdfInfo: {
        show: false,
        title: '',
        node: {}
      },
      contentList: [],
      total: 1,
      // 树形数据
      data: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      lastClickTime: 0,
      currentTreeMenu: [],
      currentTree: {},
      // 查询参数
      queryParams: {
        category: '0',
        pid: ''
      },
      // 列表查询参数
      tableParams: {
        pageNum: 1,
        pageSize: 50,
        filename: '',
        pid: '0',
        category: '0,1',
        orderByCode: ""
      },
      // 内容查询参数
      contentParams: {},
      // 选中列表数据类型
      selectedItems: [],
      // 加载图标
      isLoding: false,
      // 列表类型
      listType: 'list'
    };
  },
  created() {
    this.getList()
    this.getContentList()
  },
  methods: {
    /**
     * 查询树列表
     * @returns {Promise<void>}
     */
    async getList() {
      this.isLoding = true
      // 查询分类
      await listWjglfl(this.queryParams).then(res => {
        if(res.code === 200) {
          this.data = res.data
          // this.$store.commit("SET_TYPE", 'table');
        }
      }).finally(res => { this.isLoding = false })
    },
    /**
     * 查询内容
     * @returns {Promise<void>}
     */
    async getContentList() {
      this.isLoding = true
      await listWjglfl(this.tableParams).then(res => {
        if (res.data !== null) {
          this.contentList = res.data
        }else {
          this.contentList = []
        }
      }).finally(end => { this.isLoding = false })
    },
    /**
     * 检索数据
     */
    async getAllData() {
      this.tableParams.category = '1'
      this.tableParams.pid = ''
      this.isLoding = true
      await globalList(this.tableParams).then(res => {
        if (res !== null) {
          this.contentList = res
        }else {
          this.contentList = []
        }
      }).finally(end => { this.isLoding = false })
    },
    /**
     * 菜单右键
     * @param event
     * @param node
     * @param component
     */
    handleNodeContextmenu(event, node, component) {
      this.closeAllMenu()
      event.preventDefault();
      this.$refs.treeMenu.show(event, node);
    },
    /**
     * 打开内容右键
     * @param event
     */
    handleContext(event) {
      this.closeAllMenu()
      event.preventDefault();
      this.$refs.contextMenu.show(event, this.currentTree);
    },
    /**
     * 选项右键菜单
     */
    handleItem(event, item) {
      this.closeAllMenu()
      event.preventDefault();
      this.$refs.itemMenu.show(event, item);
    },
    /**
     * 关闭所有的右键弹窗
     */
    closeAllMenu() {
      this.$refs.contextMenu.close();
      this.$refs.treeMenu.close();
      this.$refs.itemMenu.close();
      this.$refs.topMenu.close();
    },
    // 鼠标单机
    handleNodeClick(data, node, component) {
      const now = new Date().getTime();
      // 如果双击间隔小于300毫秒，则处理为双击事件
      if (now - this.lastClickTime < 300) { // 双击
      }else {  // 单机
        this.isLoding = true
        // 设置单机展开或者不展开
        this.toggleExpanded(node)
        let array = this.getNodeDataToRoot(node)  // 获取当前的树 数组
        let newArray = array.slice()
        newArray.pop()
        this.currentTreeMenu = newArray.reverse()
        this.currentTree = data
        // 查询数据
        this.tableParams.pid = data.id
        listWjglfl(this.tableParams).then(res => {
          if (res.data !== null) {
            this.contentList = res.data
          }else {
            this.contentList = []
          }
        }).finally(end => { this.isLoding = false })
      }
      this.closeAllMenu()
      // 更新最后点击时间
      this.lastClickTime = now;
    },
    getNodeDataToRoot(node) {
      // 调用getAllNodeData方法，并传入当前节点
      return this.getAllNodeData(node);
    },
    getAllNodeData(node, allData = []) {
      // 收集当前节点的数据
      allData.push(node);
      // 如果当前节点是根节点，则返回收集的所有数据
      if (node.level === 0) {
        return allData;
      }
      // 否则，递归遍历其父节点
      return this.getAllNodeData(node.parent, allData);
    },
    // 设置不展开
    toggleExpanded(node) {
      if (node.expanded) {
        node.collapse();
      } else {
        node.expand();
      }
    },
    // 点击内容调用
    clickTable(item) {
      if (this.isSelected(item)) {
        this.selectedItems = this.selectedItems.filter(selectedItem => selectedItem.id !== item.id);
      } else {
        this.selectedItems.push(item);
      }
    },
    // 双击
    doubleClick(item) {
      if (item.category === '0') {  // 双击文件夹
        this.isLoding = true
        // 查询数据
        this.tableParams.pid = item.id
        listWjglfl(this.tableParams).then(res => {
          if (res.data !== null) {
            this.contentList = res.data
          }else {
            this.contentList = []
          }
        }).finally(end => { this.isLoding = false })
        // 更新顶部位置
        this.currentTreeMenu.push({data: item})
        this.currentTree = item
      }else {  // 双击文件
        if (item.filetype === '.txt') {  // 修改文件内容
          this.fileInfo.show = true
          this.fileInfo.title = item.filename
          this.fileInfo.node = item
        }else if (item.filetype === '.pdf') {  // 修改文件内容
          this.pdfInfo.show = true
          this.pdfInfo.title = item.filename
          this.pdfInfo.node = item
        }else {  // 如果是其他文件则下载文件
          this.downFile_(item)
        }
      }
    },
    isSelected(item) {
      return this.selectedItems.some(selectedItem => selectedItem.id === item.id);
    },
    // 处理标题
    handleTreeTitle(filename) {
      if (filename.length > 8) {
        return filename.substr(0,8)+'...'
      }else {
        return filename
      }
    },
    /**
     * 切换视图类型
     * @param type
     */
    changeContentType(type) {
      this.listType = type
      this.closeAllMenu()
    },
    changeContentPx(type) {
      this.tableParams.orderByCode = type
      if (this.tableParams.filename !== '' && this.tableParams.filename !== null) {
        this.getAllData()
      }else {
        this.getContentList()
      }

    },
    /**
     * 点击顶部菜单
     * @param val
     */
    clickTopMenu(val) {
      if (typeof val === 'string') {  // 当前是首页
        this.tableParams.category = '0,1'
        this.tableParams.pid = '0'
        this.getContentList()
        this.currentTree = {}
        this.currentTreeMenu = []
      }else if (typeof val === 'object') { // 当前是菜单数据
        let data = []
        // 1.先处理顶部导航
        for (const item of this.currentTreeMenu) {
          if (item.data.id === val.id) {
            data.push(item)
            break;
          }else { data.push(item) }
        }
        this.$set(this, 'currentTreeMenu', data)
        // 2.查询当前的数据
        this.tableParams.category = '0,1'
        this.tableParams.pid = val.id
        this.getContentList()
      }
    },
    /**
     * 显示内容
     */
    topHandleList(event) {
      this.closeAllMenu()
      event.preventDefault();
      this.$refs.topMenu.show(event);
    },
    /**
     *  树型菜单 右键菜单方法
     */
    handleClick(type, node) {
      if (type === 'shuaxinshumulu') {  // 刷新树目录
        this.getList()
      }else if (type === 'xinjianwenjianjia') { // 新建文件夹
        this.addWjj(node)
      }else if (type === 'xinjianwenjian') { // 新建文件
        this.addContentWj(node)
      }else if (type === 'xiazai') { // 下载

      }else if (type === 'fuzhi') { // 复制
        this.copyFile(node, 'menu')
      }else if (type === 'jianqie') { // 剪切

      }else if (type === 'chongmingming') { // 重命名
        this.renameFile(node, 'menu')
      }else if (type === 'shanchu') { // 删除
        this.removeFile(node, 'menu')
      }else if (type === 'shuxing') { // 属性

      }
    },
    // 新建文件夹
    async addWjj(node) {
      // 查询最大排序
      let px = 1;
      await queryMaxPx(node.id).then(res => {
        if (res.data !== null) {
          px = res.data
        }
      })
      const newChild = {
        pid: "",
        filename: '新建文件夹',
        filetype: 'zwjj',
        icon: 'iconfont icon-wenjianjia',
        iconcolor: '#FDE28F',
        children: [],
        px: px,
        category: '0', // 0 菜单  1 文件
        collect: 0, // 0 未收藏 1 收藏
        edit: true,
        readonly: false
      }
      newChild.pid = node.id
      let values = this.getLastZm(newChild.filename)
      newChild.filecode = values
      if (!node.children) {
        this.$set(node, 'children', []);
      }
      node.children.push(newChild);
      this.$nextTick(() => {
        this.$refs.inputIcon.focus()
      })
    },
    // 更新文件夹名称
    changeFolderName(val, node) {
      let values = this.getLastZm(val)
      this.$set(node, 'filecode', values)
    },
    // 获取字符串首字母小写
    getLastZm(str) {
      const field = pinyin(str, { toneType: 'none', type: 'array' })
      return field.map(py => py[0][0]).join('').toLowerCase()
    },
    /**
     * 新增/修改文件夹名称
     * @param event
     * @param data
     */
    addFolderName(event, type, data, index) {
      if(event !== undefined) {
        event.preventDefault();
      }
      // 校验文件名是否重复
      verifyFileName(data.filename, data.filetype).then(res => {
        // 判断当前的用户是新增还是修改
        if (res.data && data.id === undefined) {
          this.$message.error("当前文件名已存在请重新修改!")
          if (type === 'tree') {
            this.$refs.inputIcon.focus()
          }else {
            document.getElementById(`inputIconContent${index}`).focus()
          }
        }else {
          if (data.id === undefined) {
            addWjglfl(data).then(res => {
              if (res.code === 200) {
                this.$message.success("创建成功！")
              }
            }).finally(async res => {
              this.$set(data, 'edit', false)
              await this.getList()
              await this.getContentList()
            })
          }else {
            updateWjglfl(data).then(res => {
              if (res.code === 200) {
                this.$message.success("修改成功！")
              }
            }).finally(async res => {
              this.$set(data, 'edit', false)
              await this.getList()
              await this.getContentList()
            })
          }
        }
      })
    },
    /**
     * 重命名文件
     * @param data
     */
    renameFile(data, type) {
      this.$set(data, 'edit', true)
      this.$nextTick(() => {
        if (type === 'menu') {
          this.$refs.inputIcon.focus()
        }else {
          let index = this.contentList.findIndex(item => item.id === data.id)
          document.getElementById(`inputIconContent${index}`).focus()
        }
      })
    },
    /**
     * 删除文件
     * @param node
     */
    removeFile(node, type) {
      if (node.id !== undefined && node.id !== "" && node.id !== null) {
        this.$modal.confirm('请确认是否要删除 ' + node.filename + " 文件夹").then(() => {
          return delWjglfl(node.id);
        }).then(() => {
          this.getList();
          this.getContentList()
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {
        })
      }
    },
    /**
     * 复制文件
     * @param node
     */
    copyFile(node, type) {
      let newObj = node
      newObj.id = undefined
      newObj.filename = newObj.filename + "(副本)"
      newObj.filecode = newObj.filecode + "fb"
      verifyFileName(newObj.filename, newObj.filetype).then(res => {
        if (res.data && newObj.id === undefined) {
          this.$message.error("当前文件名已存在请重新修改!")
          if (type === 'tree') {
            this.$refs.inputIcon.focus()
          }else {
            document.getElementById(`inputIconContent${index}`).focus()
          }
        }else {
          addWjglfl(newObj).then(res => {
            if (res.code === 200) {
              this.$message.success("复制成功！")
            }
          }).finally(res => {
            if (type === 'menu') {
              this.getList()
            }else {
              this.getContentList()
            }
          })
        }
      })
    },
    /**
     * 收藏
     */
    collectFolder() {
      console.log(this.currentTreeMenu)
    },
    /**
     * 刷新
     */
    refreshFolder() {
      let index = this.currentTreeMenu.length - 1
      let obj = this.currentTreeMenu[index].data
      this.tableParams.pid = obj.id
      this.getContentList()
    },
    /**
     * 右边内容， 右键菜单方法
     */
    handleClickContext(type, node) {
      if ("shuaxinshumulu" === type) {  // 刷新
        this.tableParams.pageNum = 1
        this.getContentList()
      }else if ("shagnchuanwenjian" === type) { // 上传文件

      }else if ("xinjianwenjianjia" === type) { // 新建文件夹
        this.addContentWjj(node)
      }else if ("xinjianwenjian" === type) { // 新建文件
        this.addContentWj(node)
      }
    },
    /**
     * 添加文件夹
     */
    async addContentWjj(node) {
      // 查询最大排序
      let px = 1;
      await queryMaxPx(node.id).then(res => {
        if (res.data !== null) {
          px = res.data
        }
      })
      const newChild = {
        pid: "",
        filename: '新建文件夹',
        filetype: 'zwjj',
        icon: 'iconfont icon-wenjianjia',
        iconcolor: '#FDE28F',
        children: [],
        px: px,
        category: '0', // 0 菜单  1 文件
        collect: 0, // 0 未收藏 1 收藏
        edit: true,
        readonly: false
      }
      newChild.pid = node.id
      let values = this.getLastZm(newChild.filename)
      newChild.filecode = values
      if (!node.children) {
        this.$set(node, 'children', []);
      }
      // if (node.children.length > 0) {
      //   let obj = node.children[node.children.length - 1]
      //   let px = obj.px + 1
      //   newChild.px = px
      // }
      this.contentList.push(newChild)
      this.$nextTick(() => {
        let index = this.contentList.length - 1
        document.getElementById(`inputIconContent${index}`).focus()
      })
    },
    /**
     * 添加文件
     */
    async addContentWj(node) {
      // 查询最大排序
      let px = 1;
      await queryMaxPx(node.id).then(res => {
        if (res.data !== null) {
          px = res.data
        }
      })
      const newChild = {
        pid: "",
        filename: '新建文本文档',
        filetype: '.txt',
        icon: 'el-icon-document',
        iconcolor: '',
        children: [],
        px: px,
        category: '1', // 0 菜单  1 文件
        collect: 0, // 0 未收藏 1 收藏
        edit: true,
        readonly: false
      }
      newChild.pid = node.id
      let values = this.getLastZm(newChild.filename)
      newChild.filecode = values
      if (!node.children) {
        this.$set(node, 'children', []);
      }
      // if (node.children.length > 0) {
      //   let obj = node.children[node.children.length - 1]
      //   let px = obj.px + 1
      //   newChild.px = px
      // }
      this.contentList.push(newChild)
      this.$nextTick(() => {
        let index = this.contentList.length - 1
        document.getElementById(`inputIconContent${index}`).focus()
      })
    },
    /**
     * 文件或文件夹右键等
     */
    handleItemClickContext(type, node) {
      if ("jinru" === type) {  // 进入
        this.tableParams.pageNum = 1
        this.tableParams.pid = node.id
        this.getContentList()
        // 更新顶部菜单
        this.currentTreeMenu.push({data: node})
        this.currentTree = node
      }else if ("queryPdf" === type) {  // 查看
        this.pdfInfo.show = true
        this.pdfInfo.title = node.filename
        this.pdfInfo.node = node
      }else if ("bianji" === type) {  // 编辑
        this.fileInfo.show = true
        this.fileInfo.title = node.filename
        this.fileInfo.node = node
      }else if ("xiazai" === type) {  // 下载
        this.downFile_(node)
      }else if ("fuzhi" === type) {  // 复制
        this.copyFile(node, 'content')
      }else if ("jianqie" === type) {  // 剪切

      }else if ("chongmingming" === type) {  // 重命名
        this.renameFile(node, 'content')
      }else if ("shanchu" === type) {  // 删除
        this.removeFile(node, 'content')
      }else if ("shuxing" === type) {  // 属性

      }
    },
    /**
     * 下载文件
     * @param item
     * @private
     */
    downFile_(item) {
      console.log("item", item)
      if (item.category === '0') {  // 文件夹

      }else if (item.category === '1') { // 文件
        console.log("item", item)
        downloadFile(item.id, 'blob').then(response => {
          const binaryData = [];
          binaryData.push(response);
          let url = window.URL.createObjectURL(new Blob(binaryData, { type: 'application/octet-stream' }));
          const link = document.createElement('a');
          link.href = url
          link.download = item.filename + item.filetype;
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        })
      }

    },
    // 文件上传刷新
    refresh() {
      this.getList()
      this.getContentList()
    },
    closeFileEdit() {
      this.fileInfo.show = false
    },
    /**
     * 保存文件
     * @param node
     * @param content
     */
    saveTxtFile(node, content) {
      node.content = content
      saveFile(node).then(res => {
        if (res.data) {
          this.$message.success("保存成功！")
        }else {
          this.$message.success("保存失败！")
        }
        this.fileInfo.show = false
        this.getList()
        this.getContentList()
      })
    }
  }
}
</script>

<style scoped>
.main {
  display: flex;
  flex: 1;
  width: 100%;
}
.main-left {
  flex: 0 0 15%; /* 宽度为15% */
  height: calc(100vh - 50px);
  overflow-y: auto;
  border-right: 1px solid #DCDFE6;
}
.main-right {
  flex: 0 0 85%; /* 宽度为85% */
}
.main-table-one {
  width: 100%;
  height: 50px;
  background-color: #F9F9F9;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
}
.main-table-navi {
  border: 1px solid #C0C4CC;
  height: 30px;
  font-size: 14px;
  line-height: 30px;
  background-color: #F3F3F3;
  padding-left: 5px;
}
.main-table-navi2 {
  width: 30px;
  height: 30px;
  line-height:30px;
  text-align:center;
  border: 1px solid #C0C4CC;
  color: #999999;
}
.main-table-navi2:hover {
  background-color: #E5F8FF;
}
.main-table-navi3 {
  background-color: white;
  height: 30px;
  line-height: 30px;
  width: 370px;
  float: right;
}
.main-table-two {
  width: 100%;
  height: calc(100vh - 110px);
  padding: 5px;
  border-right: 1px solid #DCDFE6;
  border-top: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  display: grid;
  grid-template-columns: repeat(10, 1fr); /* 14列，每列宽度相等 */
  grid-template-rows: repeat(5, 1fr);     /* 4行，每行高度相等 */
  gap: 10px;
}
.main-table-two-loading {
  width: 100%;
  height: calc(100vh - 200px);
  padding: 5px;
}
/* 定义网格项 */
.grid-item {
  text-align: center; /* 文本居中 */
  height: 110px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.grid-item:hover{
  background-color: #e5f3ff;
}
.gridItemBackground {
  background-color: #e5f3ff;
}
.grid-item-top {
  height: 70px;
  position: relative;
}
.grid-item-bottom {
  height: 40px;
  line-height: 30px;
  font-size: 12px;
}
.checkStatus {
  position: absolute;
  margin: 5px;
  color: #409EFF;
  z-index: 1000;
}
.input-icon ::v-deep .el-input__inner {
  width: 120px;
  height: 20px;
  margin-left: 10px;
}
.input-icon-content ::v-deep .el-input__inner {
  height: 20px;
}
.filename-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}
.filename-icon {
  height:100%;
  line-height:100%;
  font-size: 16px;
}
.filename-icon:hover {
  color: #409EFF;
}
</style>
